<script setup lang="ts">
import type { Ref } from "vue";

import { computed, provide, ref } from "vue";
import useStore from "@src/store/store";

import ChatBottom from "@src/components/views/HomeView/ServiceChat/ChatBottom/ChatBottom.vue";
import ChatMiddle from "@src/components/views/HomeView/ServiceChat/ChatMiddle/ChatMiddle.vue";
import ChatTop from "@src/components/views/HomeView/ServiceChat/ChatTop/ChatTop.vue";
import useServiceStore from "@src/store/serviceStore";
import { conversations } from "@src/store/defaults";
import { IConversation } from "@src/types";
import { watch } from "fs";
import AiSettingOperate from "../Sidebar/AiSetting/AiSettingOperate.vue";

const store = useStore();
const serviceStore = useServiceStore();

const currentConverstions = computed(()=>{
  if(!serviceStore.currentConversationRelationId) {
    return [];
  }else{
    var relation = serviceStore.conversationRelations[serviceStore.currentConversationRelationId];
    if(relation == undefined) {
      //查是不是在history中
      relation = serviceStore.conversationRelationsHistory[serviceStore.currentConversationRelationId];
      if (relation == undefined) {
        return [];  
      }
    }
    const conversations = relation.conversations
    if(conversations){
      const keys = Object.keys(conversations);
      keys.sort(function(a,b){return parseInt(a) - parseInt(b);});
      const sorted:IConversation[] = [];
      keys.forEach(key => {
        sorted.push(conversations[key]);
      });
      return sorted;
    }else{
      return [];
    }    
  }  
})

provide("conversations", currentConverstions.value); 

</script>

<template>
  <div v-if="conversations" class="h-full w-full flex flex-row scrollbar-hidden">
    <div class="h-full flex-col grow flex">
      <ChatTop></ChatTop>
      <ChatMiddle></ChatMiddle>
      <ChatBottom />
    </div>
    <div class="h-ful">
      <AiSettingOperate />
    </div>
    
  </div>
</template>
